/**
  续租生成订单，带租客确认
  public static final int1 NEW_ORDER_STATUS_0 =0;
  租客提交，待房东确认
  public static final int NEW_ORDER_STATUS_1 =1;
  房东已取消
  public static final int NEW_ORDER_STATUS_2 =2;
  房东已签约，待租客签约
  public static final int NEW_ORDER_STATUS_3 =3;
  待租客支付
  public static final int NEW_ORDER_STATUS_4 =4;
  租客支付成功
  public static final int NEW_ORDER_STATUS_5 =5;
  订单关闭
  public static final int NEW_ORDER_STATUS_99 = 99;
  public static final int CONTRACT_STATUS_1 = 1; 合同状态 1 暂存 房东已签，租客待签
  public static final int CONTRACT_STATUS_2 = 2; 合同状态 2 生效 双方已签
  public static final int CONTRACT_STATUS_3 = 3; 合同状态 3 废除 解除合同
  public static final int CONTRACT_STATUS_4 = 4; 合同状态 4 续约中
  public static final int CONTRACT_STATUS_5 = 5; 合同状态 5 退租中
 */
<template>
  <div class="rent-contract component actWrap">
    <tab :line-width="2" :animate="false">
      <tab-item @on-item-click="onItemClick" selected>全部</tab-item>
      <!-- <tab-item @on-item-click="onItemClick">待处理</tab-item> -->
      <tab-item @on-item-click="onItemClick">已签约</tab-item>
    </tab>
    <div class="Li">
      <div class="Li-item" v-for="(item, index) in itemList" :key="index">
        <div class="Li-item-i">
          <div class="i">
            <h4 class="i-left">
              <img class="avatar" :src="avatarUrl" alt="">
              <span class="l-title">{{trueName}}</span>
            </h4>
            <h4 class="i-status">{{status2txt(item.status)}}</h4>
          </div>
        </div>
        <house-list v-if="item.housePerson" :houseInfo="item.housePerson" :detailPath="+item.houseType === 2 ? '/apartmentDetail' : '/detail'" class="contract-house">
        </house-list>
        <div class="txt-describe">
          <p class="clearfix"><span>合同编号:</span><span class="f-r">{{item.code}}</span></p>
          <p class="clearfix"><span>签约时间:</span><span class="f-r">{{item.createTime | IOSformatDate(item.beginTime, '/')}}</span></p>
          <p class="clearfix"><span>租赁日期:</span><span class="f-r">{{item.beginTime | IOSformatDate(item.beginTime, '/')}} - {{item.endTime | IOSformatDate(item.beginTime, '/')}}</span></p>
        </div>
        <div class="bt-container">
          <x-button v-if="item.status === 2" @click.native="toContractDetail(item.orderId)"  class="theme-bt bt-c" mini>详情</x-button>
        </div>
      </div>
    </div>

      <div v-show="showDialog" class="v_show_contract" :class="{'tips-dialog': true}">
      <section class="tips-dialog render__contract__dialog">
        <div class="body">
          <contract :contractDetail="orderInfo"/>
          <!-- <p>1、电子合同一经双方电子签名即生效，请详细阅读合同条款再进行签约；</p>
          <p>2、请确认签约主体、租期、租金、付款方式、押金方案、纠纷处理途径等自由约定条款；</p>
          <p>3、租赁合同文本为平台签约标准合同文本，通过平台签约的用户有其他约定的，可以在附页中补充协议，但内容不得与正文及法律法规相违背，补充协议与正文同等效力；</p>
          <p>4、本合同由第三方CA认证机构提供公证服务，具备真实有效，签订一份合同需支付 ¥2.75 元服务费用，如有补充协议合同费用累加；</p> -->
          <x-button type="primary" @click.native="showDialog = false">关闭</x-button>
        </div>
     <div class="btn-close" @click="showDialog = false"></div>
      </section>
    </div>
    <!-- <section v-if="dataUpdated" class="tip" :class="{dockBottom: itemList.length < 2, fadeOut: dataUpdated}">
      <icon type="warn"></icon>
      平台自动备案，一经签约，平台提取备案字段，经租赁主管部门审核，出具电子租赁凭证，用户可凭电子租赁凭证享受优先积分入户、入学、办理居住证等公共服务。您本次交易所得收入应依法缴纳相应税款，请尽快自行前往广州地方税务局报税。（备案仅能作为能否尽到注意义务的一个证据材料，不能直接创设减轻刑事责任的依据）
    </section> -->
  </div>
</template>

<script>
import contractList from '@/components/contractList'
import noData from '@/components/noData'
import houseList from '@/components/houseList'
import contract from '@/components/contract'
export default {
  components: {
    contractList,
    noData,
    houseList,
    contract
  },
  data () {
    return {
      showDialog: false,
      tabIdx: 0,
      msg: {0: '', 1: '', 2: ''},
      contractList: {0: [], 1: [], 2: []},
      conList: [],
      itemList: [], // 判读记录数
      dataUpdated: false,
      trueName: JSON.parse(window.localStorage.getItem('userInfo') || '{}').trueName,
      avatarUrl: '',
      orderInfo: {
        housePersons: {},
        landlord: {},
        order: {},
        render: {},
        apartment: {},
        romm: {},
        renter: {
          mobile: '',
          trueName: ''
        }
      }
    }
  },
  created () {
    this.getData(this.tabIdx, '')
    let imgUrl = localStorage.getItem('headUrlImg')
    !imgUrl || imgUrl === 'undefined' ? this.avatarUrl = require('../../../images/avatar_default.png') : this.avatarUrl = imgUrl
  },
  methods: {
    /*
     * 合同签约状态：
     * 0-未签；1-租客已签；2-房东已签；3-双方已签
     */
    getData (idx, status) {
      this.$axiosGeting(this.$api.contractList, {
        page: 1,
        pageSize: 10,
        status
      }).then(res => {
        if (res.code === '0000') {
          this.msg = ''
          // this.contractList = res.data
          this.itemList = res.data
          this.$nextTick(() => {
            this.dataUpdated = true
          })
        } else {
          this.msg = '您还没有合同信息哦~'
          this.itemList = []
        }
      })
    },
    status2txt (status) {
      if (status === 1) return '租客待签'
      else if (status === 2) return '合同生效'
      else if (status === 3) return '合同失效'
      else if (status === 4) return '续约中'
      else if (status === 5) return '退租中'
      else return ''
    },
    onItemClick (index) {
      this.tabIdx = index
      // if (this.contractList[index].length === 0) {
      switch (index) {
        // 全部合同
        case 0: this.getData(index, ''); break
        // 已签约合同
        case 1: this.getData(index, '2'); break
        // 待处理合同
        case 2: this.getData(index, '0'); break
      }
      // }
    },
    toContractDetail: function (contractId) {
      console.log(contractId)
      // this.$axiosGet(this.$api.getFileDetailUri, {contractId}).then(json => {
      //   console.log(json)
      //   if (json.code === '0000' && json.data && json.data.fileDetailUri) {
      //     window.location = json.data.fileDetailUri
      //   }
      // })
      this.queryOrderDetail4Renter(contractId)
    },
    queryOrderDetail4Renter (contractId) {
      this.contractId = contractId
      this.showDialog = true
      this.$axiosPosting(this.$api.queryOrderDetail4Renter, {
        orderId: contractId
      }).then(json => {
        if (json.code === '0000') {
          if (!json.data.renter) {
            json.data['renter'] = {
              mobile: '***********',
              trueName: ''
            }
          }
          this.orderInfo = json.data
          if (!this.orderInfo.apartment) this.orderInfo.apartment = {}
          if (!this.orderInfo.romm) this.orderInfo.romm = {}
          if (!this.orderInfo.renter) this.orderInfo.renter = {}
          if (!this.orderInfo.render) this.orderInfo.render = {}
          if (!this.orderInfo.housePersons) this.orderInfo.housePersons = {}
          this.orderInfo.houseType = this.orderInfo.order.houseType
        }
      })
    }

  }
}
</script>

<style lang="less" scoped>
.v_show_contract {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 100vw;
  min-height: 100vh;
  height: auto !important;
  overflow-y: auto !important;
  background: white;
}


  .tips-dialog .body {
    padding: 0 15px 15px;
  }
  .weui-mask {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
  }
  .tips-dialog .weui-dialog, .confirm-refuse .weui-dialog {
    height: 100%;
    overflow: scroll;
    max-width: 100%;
  }
  .contract__dialog .weui-dialog {
    width: 98vw !important;
  }
  body .weui-dialog {
    border: 0;
    border-radius: 5px;
  }
  body .weui-dialog {
    padding-top: 4px;
  }
  .weui-dialog {
    position: fixed;
    z-index: 5000;
    width: 80%;
    max-width: 300px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
    text-align: center;
    border-radius: 3px;
    overflow: hidden;
 }

  .tips-dialog .header {
    padding: 30px 0 20px;
    font-size: 24px;
    line-height: 1;
    color: #000;
  }
  .tips-dialog .btn-close, .confirm-refuse .btn-close {
    position: absolute;
    left: 50%;
    bottom: -60px;
    width: 36px;
    height: 36px;
    margin-left: -18px;
    background: url(…Ee3qWPV8omeaghFyn/8Uqn6e2woOm4OndskyOHdw0m/wkwABdM8/yuI42IAAAAAElFTkSuQmCC) no-repeat;
    background-size: 100% 100%;
  }




  .rent-contract{
    padding-top: 44px;
    font-size: .75rem;
    background: #fff;
    .vux-tab {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 99;
    }
    .contract-list{
      background: #f4f4f4;
      // height: ~"calc(100vh - 244px)";
      box-sizing: border-box;
      overflow: auto;
      .btn-group {
        padding-top: .4rem;
        margin-top: .5rem;
        font-size: 0;
        text-align: right;
        border-top: 1px solid #DADADA;
        .theme-bt {
          width: 3.5rem;
          margin-top: 0;
          margin-left: .5rem;
          padding: 0;
          font-size: 13px;
          line-height: 1.5rem;
        }
        .bt-c {
          color: #d4323f;
          border-color: #d4323f;
        }
        .bt-g {
          color: #777;
          border: 1px solid #999;
          background: #fff;
        }
      }
      .tips {
        font-size: 15px;
        line-height: 3rem;
        color: #999;
        text-align: center;
        background: #fff;
      }
    }
  }
</style>
<style lang="less" scoped>
.Li{
  .bt-up {
    bottom: 40px;
    // padding-left: 0
    // padding-right: 0;
  }
  // .Li-item:last-child{
  //   border-bottom: 0;
  // }
  .Li-item{
    position: relative;
    // border-bottom: 0.3rem;
    border-bottom: 6px solid #f4f4f4;
    .bt-container{
      text-align: right;
      padding: 16px;
    }
    .Li-item-i{
      display: flex;
      font-size: 12px;
      align-items: center;
      border-bottom: 0.5px solid #f4f4f4;
      .time {
        font-size: 12px;
      }
      .i{
        padding: 12px 10px;
        display: flex;
        flex-wrap: wrap;
        .i-left{
          width: 100%;
          padding-right: .5rem;
          line-height: 1rem;
          line-height: 20px;
          .l__title {
            color: #333;
            font-size: 13px;
          }
        }
        .i-button {
          color: #989898;
          line-height: 24px;
          span:nth-of-type(2) {
            padding-left: 1rem;
          }
        }
      }
      .i-status{
        position: absolute;
        // top: 10px;
        padding-top: 1px;
        font-size: 14px;
        right: 0.65rem;
        line-height: 18px;
        text-align: center;
        color: #007eff;
      }
    }
  }
}
.tip {
  margin-top: 0px;
  padding: 14px 20px 0 32px;
  font-size: 13px;
  line-height: 1.8;
  position: relative;
  color: #999;
  padding-bottom: 12px;
  background: white;
  opacity: 0;
  transition: all 3s;
  text-align: justify;
 .weui-icon-warn {
    font-size: 18px;
    color: #ff8a00;
    position: absolute;
    left: 3px;
    top: 16px;
  }
}
.dockBottom {
  position: absolute;
  bottom: 0;
  background: white;
  box-sizing: border-box;
  opacity: 1;
}
.visible {
  opacity: 1;
}
.contract-house {
  padding-left: 18px;
  background: #f8f8f8;
}
.txt-describe {
  padding: 7px 18px 0;
  span {
    float: left;
    display: inline-block;
    font-size: 12px;
    color: #777;
    line-height: 20px;
  }
  .f-r {
    float: right;
    color: #333;
  }
}
.bt-c {
  line-height: 29px;
}
.bt-red {
  color: #d4323f;
  border: 1px solid #d4323f;
}
.weui-btn_mini {
  padding: 0 20px;
  font-size: 12px;
}
.weui-btn {
  margin: 6px 0 0 5px;
}
.avatar {
  margin: 0 7px 0 15px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  vertical-align: middle;
}

</style>



<style lang="less" scoped>

  .OrderForRenter-ong{
    float: right;
    margin-top: 13px;
    padding: 0 10px;
    border-radius: 3px;
    background: #fff;
    border: 1px solid #ff9600;
    color: #fff;
    height: 23px;
    line-height: 24px;
  }
  .btn-up {
    margin-left: 10px;
    color: #ff9600;
  }
  .tip {
    font-size: 13px;
  }
  .btn-gray {
    border: 1px solid #777777;
    color: #777777;
    background: white;
  }
  .li-zkdd {
    font-size: .7rem;
    border-bottom: 6px solid #F3F3F3;
    .status {
      padding: 0 18px;
      height: 1.8rem;
      line-height:  1.8rem;
      border-bottom: 1px solid #F3F3F3;
      .right {
        float: right;
        img {
          height: .7rem;
          position: relative;
          top: .1rem;
        }
      }
    }
  }
  .btn-container {
    position: relative;
    height: 52px;
    padding-right: 15px;
    &:before {
      content: '';
      position: absolute;
      bottom: 53px;
      left: 0;
      right: 0;
      border-bottom: 1px solid #F3F3F3;
    }
  }
</style>
<style lang="less">
.vux-x-dialog{
position: relative;
}
.OrderForRenter {
  .house {
    padding: 18px 18px 16px 0;
    
  }
  .label {
    span:nth-child(3) {
      display: none;
    }
    @media screen and (max-width: 350px) {
      span:nth-child(2) {
        display: none;
      }
    }
  }
  .tips-dialog {
    height: 100%;
    .header {
      padding: 30px 0 20px;
      font-size: 24px;
      line-height: 1;
      color: #000;
    }
    .body {
      padding: 0 15px 15px;
      p {
        margin-bottom: 10px;
        font-size: 12px;
        line-height: 1.6;
        color: #777;
        text-align: left;
      }
      .weui-btn {
        margin-top: 20px;
      }
    }
  }
  .tips-dialog, .confirm-refuse {
    .weui-dialog {
      overflow: visible;
    }
    .btn-close {
      position: absolute;
      // bottom: -60px;
      top: 1rem;
      right:1rem;
      width: 1.8rem;
      height: 1.8rem;
      margin-left: -0.9rem;
      background: url("../../../images/icon_close.png") no-repeat;
      background-size: 100% 100%;
      z-index: 9999;
    }
  }
}

</style>
<style lang="less">
.render__contract__dialog {
  .weui-dialog {
    width: 98vw !important;
    max-width: 100vw!important;
  //  position: absolute;
  //  overflow: auto;
    height: 100%;
    overflow: scroll !important;
    max-width: 100;

  }
}
</style>

